<script setup lang="ts">
	import {
		reactive,
		ref
	} from 'vue'
	import {
		useRouter
	} from 'uni-mini-router'
	import {
		getCurrentInstance
	} from 'vue'
	import {
		onShow,
		onHide,
		onLoad,
		onReachBottom,
		onPageScroll
	} from '@dcloudio/uni-app'
	import {
		userStore
	} from '@/pinia';
	const userStoreInfo = userStore();
	const {
		proxy,
	} = getCurrentInstance()
	const router = useRouter()
	let searchWord = ref<string>('');
	let vtList = ref([{
		selected: false,
		title: '阿道夫',
		nowNum: 10,
		borderColor: 'rgba(0,0,0,0.05)'
	},
	{
		selected: false,
		title: '潘婷',
		nowNum: 66,
		borderColor: 'rgba(0,0,0,0.05)'
	},
	{
		selected: false,
		title: '海飞丝',
		nowNum: 32,
		borderColor: 'rgba(0,0,0,0.05)'
	},
	{
		selected: false,
		title: '海飞丝',
		nowNum: 100,
		borderColor: 'rgba(0,0,0,0.05)'
	}]);
	let listData = ref([])
	let progressFlag = ref(0)
	let selectVote = (index, it, item, sonIndex) => {
		progressFlag.value = index
		if (item.releaseContent.isVote) return
		proxy.$req('POST', proxy.$api.toupiao, {
			optionId: it.id,
			voteId: item.releaseContent.id,
		}).then((res) => {
			uni.$u.toast(res.message)
			if (res.success) {
				listData.value[index].releaseContent = res.result
				// listData[index].releaseContent.communityOption[sonIndex].clickNum++
				// listData[index].releaseContent.communityOption[sonIndex].optionIsVote = 0
			}
			console.log(listData.value);
		})

	}
	const add = () => {
		uni.$on('refreshCommunity', (e) => {
			console.log(e.data);
			pageNum.value = 1
			listData.value = []
			getList()
			uni.$off('refreshCommunity')
		})
		router.push({
			name: 'addCommunity',
			params: {}
		})
	}
	const search = () => {
		pageNum.value = 1
		listData.value = []
		getList()
	}
	onReachBottom(() => {
		pageNum.value++
		getList()
	})
	let pageNum = ref(1)
	const getList = () => {
		proxy.$req('GET', proxy.$api.shequList, {
			communityTitle: searchWord.value,
			pageNo: pageNum.value,
			pageSize: 15,
			memberId: userStoreInfo.userInfo.id
		}).then((res) => {
			console.log(res);
			let aa = res.result.records.map((item) => {
				if (item.releaseContent.content) {
					item.releaseContent.content = item.releaseContent.content.replace(/\<img/gi,
						'<img style="width:100%;margin:12rpx 0;border-radius:4px;"')
				}
				return item
			})
			console.log(aa);
			listData.value = listData.value.concat(aa)
			console.log(listData.value);
		})
	}
	getList()
	const goDetail = (item, index) => {
		if (item.releaseType == 0) {
			uni.$on('uploadLc', (e) => {
				//详情内点赞后回来更新列表
				listData.value[e.index].releaseContent.isLike = e.data.isLike
				listData.value[e.index].releaseContent.isCollect = e.data.isCollect
				listData.value[e.index].releaseContent.likeNum = e.data.likeNum
				uni.$off('uploadLc')
			})
			router.push({
				name: 'communityDetail',
				params: {
					id: item.releaseContent.id,
					index,
				}
			})
		}
	}
	const lcFun = (type, way, item, index) => {
		proxy.$req('POST', proxy.$api.likeAndCollect, {
			id: item.id,
			moduleType: 3,
			operateType: type,
			userId: userStoreInfo.userInfo.id,
			updateType: way
		}).then((res) => {
			if (res.success && type == 0) {
				listData.value[index].releaseContent.isLike = !listData.value[index].releaseContent.isLike
				if (listData.value[index].releaseContent.isLike) {
					listData.value[index].releaseContent.likeNum++
				} else if (listData.value[index].releaseContent.likeNum > 0) {
					listData.value[index].releaseContent.likeNum--
				}
			} else if (res.success && type == 1) {
				listData.value[index].releaseContent.isCollect = !listData.value[index].releaseContent.isCollect
				if (listData.value[index].releaseContent.isCollect) {
					listData.value[index].releaseContent.collectNum++
				} else if (listData.value[index].releaseContent.collectNum > 0) {
					listData.value[index].releaseContent.collectNum
				}
			}
		})
	}
	let bgc = ref('rgba(255,255,255,0)')
	onPageScroll((e) => {
		// console.log(e);
		if (e.scrollTop < 20) {
			bgc.value = 'rgba(255,255,255,0)'
		} else if (e.scrollTop < 30) {
			bgc.value = 'rgba(255,255,255,0.1)'
		}
		else if (e.scrollTop < 40) {
			bgc.value = 'rgba(255,255,255,0.2)'
		}
		else if (e.scrollTop < 50) {
			bgc.value = 'rgba(255,255,255,0.3)'
		}
		else if (e.scrollTop < 60) {
			bgc.value = 'rgba(255,255,255,0.4)'
		}
		else if (e.scrollTop < 70) {
			bgc.value = 'rgba(255,255,255,0.6)'
		}
		else if (e.scrollTop < 80) {
			bgc.value = 'rgba(255,255,255,0.8)'
		}
		else if (e.scrollTop > 100) {
			bgc.value = 'rgba(255,255,255,1)'
		}
	})
</script>
<template>
	<view class="indexHeader">
		<u-navbar :placeholder="true" :bgColor="bgc">
			<template #left>
				<view></view>
			</template>
			<template #center>
				<view class="searchEle">
					<u-search v-model="searchWord" label="" inputAlign="left" :show-action="false" searchIcon="search"
						shape="square" height="76rpx" bgColor="#fff" @search="search">
					</u-search>
				</view>
			</template>
		</u-navbar>
	</view>
	<view class="containerAll">
		<view class="" v-for="(item,index) in listData" :key="index" @click="goDetail(item,index)">
			<view class="messageBox" v-if="item.releaseType==0">
				<view class="mbUser">
					<image class="mbuAvatar" :src="item.releaseContent.memberAvatar" mode=""></image>
					<view class="mbuInfo">
						<text>{{ item.releaseContent.memberNickName }}</text>
						<text>{{ item.releaseContent.updateTime }}</text>
					</view>
				</view>
				<view class="mbContent">
					<view class="mbcTit">
						<u-parse :content="item.releaseContent.content"></u-parse>
					</view>
					<!-- <image class="mbcImg" src="../../static/images/gys.png" mode="widthFix"></image> -->
				</view>
				<view class="funcArea r-flex-between-center">
					<view class="fa1 r-flex-center-center"
						@click.stop="lcFun(1,item.releaseContent.isCollect?'uncollect':'collect',item.releaseContent,index)">
						<u-icon name="star-fill" size="18" color="#CB645E"
							v-if="item.releaseContent.isCollect"></u-icon>
						<u-icon name="star" size="18" v-if="!item.releaseContent.isCollect"></u-icon>
						<text :style="{color:item.releaseContent.isCollect?'#CB645E;':''}">收藏</text>
					</view>
					<view class="fa1 r-flex-center-center">
						<u-icon name="chat" size="20"></u-icon>
						<text>评论</text>
					</view>
					<view class="fa1 r-flex-center-center"
						@click.stop="lcFun(0,item.releaseContent.isLike?'unlike':'like',item.releaseContent,index)">
						<u-icon name="thumb-up-fill" color="#CB645E" size="20"
							v-if="item.releaseContent.isLike"></u-icon>
						<u-icon name="thumb-up" size="20" v-if="!item.releaseContent.isLike"></u-icon>
						<text
							:style="{color:item.releaseContent.isLike?'#CB645E;':''}">{{ item.releaseContent.likeNum }}</text>
					</view>
				</view>
			</view>
			<view class="voteBox" v-if="item.releaseType==1">
				<view class="vbTit">
					{{ item.releaseContent.voteTitle }}
				</view>
				<view class="vbIntro">
					{{ item.releaseContent.voteContent }}
				</view>
				<view class="vbCount">
					单选 {{ item.releaseContent.voteCount }}人参与
				</view>
				<view style="margin: 20rpx 20rpx 0 20rpx;">
					<view class="skillbar" v-for="(it,key) in item.releaseContent.communityOption" :key="key"
						@click="selectVote(index,it,item,key)">
						<text class="sLeft"
							:style="{color:`${it.optionIsVote==0?'#fff':'rgba(0,0,0,0.45)'}`}">{{ it.optionName }}</text>
						<text class="sRight"
							:style="{color:`${it.optionIsVote==0?'#CB645E':'rgba(0,0,0,0.45)'}`}">{{ it.clickNum }}</text>
						<u-line-progress :percentage="(it.clickNum / item.releaseContent.voteCount)*100" height="36"
							:activeColor="it.optionIsVote==0?'#CB645E':'#F2F2F2'" inactiveColor="#fff"
							:style="{border:`1rpx solid ${it.optionIsVote==0?'#CB645E':'rgba(0,0,0,0.05)'}`}">
							<!-- 动画效果不太好，不过没问题，动起来才有动画，开始都等于0，赋值的时候动画会来的 -->
							<text class="progressSlot"></text>
						</u-line-progress>
					</view>
				</view>
			</view>
		</view>
	</view>
	<view class="pen" @click="add">
		<image src="../../static/icon/pen.png" mode=""></image>
	</view>
</template>
<style lang="scss">
	page {
		background-color: #FAFAFA !important;
	}

	:deep(.u-line-progress) {
		border-radius: 16rpx;
		overflow: visible;
		// border: 1rpx solid #000;
	}

	:deep(.u-line-progress__line) {
		border-radius: 0rpx;
		border-top-left-radius: 16rpx;
		border-bottom-left-radius: 16rpx;
		border-bottom-right-radius: 0rpx;
		border-bottom-right-radius: 0rpx;
	}

	.pen {
		width: 192rpx;
		height: 192rpx;
		position: fixed;
		bottom: 200rpx;
		right: 0;

		image {
			width: 100%;
			height: 100%;
		}
	}

	.progressSlot {
		width: 100%;
		padding-left: 30rpx;
	}

	.indexHeader {
		width: 100%;
		height: 392rpx;
		display: flex;
		align-items: center;
		background-image: url('../../static/images/communityBg.png');
		background-size: 100% 100%;

		.searchEle {
			width: 686rpx;
			margin: 10rpx auto 0;
			height: 76rpx;
			display: flex;
			align-items: center;
		}
	}

	.containerAll {
		margin-top: -280rpx;
	}

	.messageBox {
		width: calc(94% - 64rpx);
		margin: 30rpx auto;
		padding: 32rpx;
		background: #FFFFFF;
		box-shadow: 8rpx 8rpx 32rpx 0rpx rgba(0, 0, 0, 0.04);
		border-radius: 24rpx;
		border: 2rpx solid #FFFFFF;

		.mbUser {
			width: 100%;
			height: 80rpx;
			display: flex;
			align-items: center;

			.mbuAvatar {
				width: 80rpx;
				height: 80rpx;
				border-radius: 40rpx;
			}

			.mbuInfo {
				margin-left: 20rpx;
				width: 500rpx;
				height: 70rpx;
				display: flex;
				flex-direction: column;
				align-items: flex-start;
				justify-content: space-between;

				text:nth-child(1) {
					font-size: 28rpx;
				}

				text:nth-child(2) {
					font-size: 20rpx;
					color: rgba(0, 0, 0, 0.45);
				}
			}
		}

		.mbContent {
			width: 100%;

			.mbcTit {
				margin: 28rpx 0;
				font-size: 32rpx;
				font-weight: 400;
				color: rgba(0, 0, 0, 0.85);
			}

			.mbcImg {
				width: 100%;
			}
		}

		.funcArea {
			width: calc(100% - 40rpx);
			height: 50rpx;
			margin-top: 30rpx;
			padding: 0 20rpx;
			font-size: 24rpx;
			font-weight: 400;
			color: rgba(0, 0, 0, 0.65);

			.fa1 {
				text {
					margin-left: 6rpx;
				}
			}
		}
	}

	.voteBox {
		width: calc(94% - 64rpx);
		margin: 20rpx auto;
		padding: 32rpx;
		background: #FFFFFF;
		box-shadow: 8rpx 8rpx 32rpx 0rpx rgba(0, 0, 0, 0.04);
		border-radius: 24rpx;
		border: 2rpx solid #FFFFFF;

		.vbTit {
			font-weight: 600;
			margin-bottom: 20rpx;
		}

		.vbIntro {
			font-size: 28rpx;
			font-weight: 400;
			color: #333333;
			margin-bottom: 20rpx;
		}

		.vbCount {
			font-size: 24rpx;
			font-weight: 400;
			color: rgba(0, 0, 0, 0.45);
		}

		.skillbar {
			position: relative;
			display: block;
			margin-bottom: 10px;
			width: 100%;
			height: 35px;
			border-radius: 3px;
			font-size: 28rpx;

			.sLeft {
				position: absolute;
				left: 30rpx;
				top: 20rpx;
				z-index: 1;
			}

			.sRight {
				position: absolute;
				right: 30rpx;
				top: 20rpx;
				z-index: 1;
			}
		}
	}
</style>